<template>
  <div class="bonus_two">
    <div class="bonus_one_select">
      <div class="bonus_left_total">
        <p @click="tabChoose('5')" :class="{ active_select: selectData.status == '5' }">
          共计
          <span class="left_total_color">{{ totalStatic.total }}</span>
          <span class="p_r_l">|</span>
        </p>
        <p @click="tabChoose('1')" :class="{ active_select: selectData.status == '1' }">
          通过
          <span class="left_total_color">{{ totalStatic.passCount }}</span>
          <span class="p_r_l">|</span>
        </p>
        <p @click="tabChoose('0')" :class="{ active_select: selectData.status == '0' }">
          不通过
          <span class="left_total_color">{{ totalStatic.notPassCount }}</span>
        </p>
      </div>
      <el-select
        size="small"
        filterable
        v-model="selectData.organId"
        @change="changeDepart"
        placeholder="请选择单位"
        clearable>
        <el-option v-for="item in columnsOffices" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="selectData.quartYM"
        value-key="name"
        placeholder="请选择"
        @change="changeYearQuater"
        clearable>
        <el-option v-for="item in yearQuater" :key="item.name" :label="item.name" :value="item"></el-option>
      </el-select>
      <el-button class="m-l-10" type="primary" size="small" icon="el-icon-download" @click="importData">
        导 出
      </el-button>
    </div>
    <div class="bonus_one_main" v-if="tableData.length">
      <div class="bonus_left">
        <el-scrollbar class="bonus_left_scroll">
          <div class="bonus_left_list">
            <div
              class="infor_left_one"
              :class="listActiveId == item.id ? 'is_select' : ''"
              v-for="(item, index) in tableData"
              :key="item.id"
              @click="lookOneTabel(item, index)">
              <div class="bonus_two_check">
                <div @click.stop>
                  <el-checkbox @click.stop.prevent @change="checkImport(item)" v-model="item.checked"></el-checkbox>
                </div>
                <div class="left_title_box">
                  <div
                    class="bonus_left_title"
                    :title="item.boundsName"
                    v-html="removeHtmlStyle(item.boundsName)"></div>
                  <span v-if="item.isRead === '0'"></span>
                </div>
              </div>
              <div class="bonus_left_status">
                <span class="left_status_bo">{{ item.boundsTypeName }}</span>
                <span class="left_status_bb">{{ enmuData(item.status) }}</span>
              </div>
              <div class="bonus_left_message">
                <div>
                  <span>{{ item.userName }}({{ item.orgName }})</span>
                </div>
                <div>{{ item.time }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div class="page_r">
          <el-pagination
            background
            layout="pager,total"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :total="tablePage.totalResult"
            @current-change="onPageChange"
            hide-on-single-page
            :pager-count="5"
            small></el-pagination>
        </div>
      </div>

      <div class="bonus_right">
        <BonusRDetail ref="inforDetail" :activeOne="activeOne" bonusType="3" @backPage="backPage" />
      </div>
    </div>
    <div class="bonus_one_main" v-else>
      <div class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import {
  listBonusConfirm,
  getBonusConfirmListCount,
  importBonusData,
  selectYearAndQuarter,
  getListAllOrg,
  updateReadStatus,
} from '@apis/bonus.js'
import BonusRDetail from './components/bonusRDetail'
export default {
  components: {
    BonusRDetail,
  },
  props: {
    // 1加分项，2减分项
    activeTab: {
      type: String,
      default: '1',
    },
  },
  data() {
    const date = new Date()
    return {
      activeOne: '1',
      columnsPeoples: [],
      tableData: [],
      selectData: {
        status: '5',
        quartz: '',
        year: date.getFullYear().toString(),
        quartYM: {},
        organId: '',
      },
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      listActiveId: '',
      processInstanceId: '',

      stateList2: [
        { id: '0', name: '不通过' },
        { id: '1', name: '通过' },
      ],
      importList: [],
      totalStatic: {
        total: 0,
        passCount: 0,
        notPassCount: 0,
      },
      yearQuater: [],
      newType: '1',
      boundsName: '',
      columnsOffices: [],
    }
  },
  watch: {
    activeTab: {
      handler(news) {
        this.importList = []
        this.activeOne = news
        // this.changeYearQuater()
        this.selectData.organId = ''
        this.selectYearAndQuarter()
      },
      deep: true,
    },
  },
  created() {
    this.selectYearAndQuarter()
    this.getListAllOrg()
  },
  mounted() {},
  methods: {
    selectYearAndQuarter() {
      selectYearAndQuarter({
        id: 1,
      }).then(res => {
        if (res.status === 200) {
          const listQuater = res.data
          this.yearQuater = []
          if (listQuater.length > 0) {
            for (const i in listQuater) {
              const year = listQuater[i].year
              for (const j in listQuater[i].list) {
                let quater = '第一季度'
                if (listQuater[i].list[j].quarter === 1) {
                  quater = '第一季度'
                } else if (listQuater[i].list[j].quarter === 2) {
                  quater = '第二季度'
                } else if (listQuater[i].list[j].quarter === 3) {
                  quater = '第三季度'
                } else if (listQuater[i].list[j].quarter === 4) {
                  quater = '第四季度'
                }
                this.yearQuater.push({ year: year, name: `${year}年${quater}`, quater: listQuater[i].list[j].quarter })
                if (listQuater[i].list[j].isChoose) {
                  this.selectData.quartYM = this.yearQuater[Number(i * 4) + Number(j)]
                }
              }
            }
            this.changeYearQuater()
          }
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    enmuData(code) {
      if (code) {
        const nameArr = this.stateList2.filter(item => {
          return item.id === code
        })
        if (nameArr.length > 0) {
          return nameArr[0].name
        } else {
          return '--'
        }
      }
    },
    changeYearQuater() {
      this.importList = []
      this.selectData.quartz = this.selectData.quartYM.quater || ''
      this.selectData.year = this.selectData.quartYM.year || ''
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.getTableList('1')
    },
    handleClick() {
      this.importList = []
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.selectData.status = '1'
      this.getTableList('1')
    },
    //
    changeTable() {
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.getTableList('1')
    },
    onPageChange(e) {
      this.tablePage.currentPage = e
      this.getTableList('1')
    },
    getTableList(type) {
      // 获取审核
      listBonusConfirm({
        inPutType: this.activeOne,
        orgId: this.selectData.organId,
        pageNum: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        quartz: this.selectData.quartz,
        status: this.selectData.status,
        year: this.selectData.year,
      }).then(res => {
        if (res.status === 200) {
          this.tableData = res.data.content
          this.tablePage.totalResult = res.data.totalSize
          if (this.tableData.length > 0) {
            let isRead = '1'
            let index = 0
            if (this.$route.query.id && type === '1') {
              this.tablePage.currentPage = res.data.pageNum
              let breakDaily = false
              for (const i in this.tableData) {
                if (this.tableData[i].isAssign === '1') {
                  this.listActiveId = this.tableData[i].id
                  this.processInstanceId = this.tableData[i].processInstanceId
                  this.taskId = this.tableData[i].taskId
                  this.boundsName = this.tableData[i].boundsName
                  breakDaily = true
                  isRead = this.tableData[i].isRead
                  index = i
                  break
                }
              }
              if (!breakDaily) {
                this.listActiveId = this.tableData[0].id
                this.processInstanceId = this.tableData[0].processInstanceId
                this.taskId = this.tableData[0].taskId
                this.boundsName = this.tableData[0].boundsName
                isRead = this.tableData[0].isRead
              }
            } else if (type === '1' && !this.$route.query.id) {
              this.listActiveId = this.tableData[0].id
              this.processInstanceId = this.tableData[0].processInstanceId
              this.taskId = this.tableData[0].taskId
              this.boundsName = this.tableData[0].boundsName
              isRead = this.tableData[0].isRead
            } else {
              let breakOne = false
              for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id === this.listActiveId) {
                  breakOne = true
                  this.listActiveId = this.tableData[i].id
                  this.processInstanceId = this.tableData[i].processInstanceId
                  this.taskId = this.tableData[i].taskId
                  this.boundsName = this.tableData[i].boundsName
                  isRead = this.tableData[i].isRead
                  break
                }
              }
              if (!breakOne) {
                this.listActiveId = this.tableData[0].id
                this.processInstanceId = this.tableData[0].processInstanceId
                this.taskId = this.tableData[0].taskId
                this.boundsName = this.tableData[0].boundsName
                isRead = this.tableData[0].isRead
              }
            }
            if (isRead === '0') {
              this.tableData[index].isRead = '1'
              updateReadStatus({ type: '2', id: this.listActiveId }).then(res => {})
            }
            this.$nextTick(() => {
              this.$refs.inforDetail.getDetail(
                this.listActiveId,
                this.processInstanceId,
                this.taskId,
                '',
                this.boundsName
              )
            })
          }
        }
      })

      getBonusConfirmListCount({
        inPutType: this.activeOne,
        orgId: this.selectData.organId,
        pageNum: 0,
        pageSize: 0,
        status: this.selectData.status,
        quartz: this.selectData.quartz,
        year: this.selectData.year,
        listType: '2',
      }).then(res => {
        this.totalStatic = {
          total: res.data.total || 0,
          passCount: res.data.passCount || 0,
          notPassCount: res.data.notPassCount || 0,
        }
      })
    },
    lookOneTabel(item, index) {
      if (this.listActiveId === item.id) return
      this.listActiveId = item.id
      this.processInstanceId = item.processInstanceId
      this.taskId = item.taskId
      this.boundsName = item.boundsName
      this.$nextTick(() => {
        this.$refs.inforDetail.getDetail(this.listActiveId, this.processInstanceId, this.taskId, '', this.boundsName)
      })
      if (item.isRead === '0') {
        item.isRead = '1'
        updateReadStatus({ type: '2', id: item.id }).then(res => {})
      }
    },

    backPage(id, processInstanceId, taskId) {
      this.listActiveId = id
      this.processInstanceId = processInstanceId
      this.taskId = taskId
      this.getTableList('2')
    },

    checkImport(item) {
      if (item.checked) {
        this.importList.push(item.id)
      } else {
        for (const i in this.importList) {
          if (this.importList[i] === item.id) {
            this.importList.splice(parseInt(i), 1)
          }
        }
      }
    },
    importData() {
      if (this.importList.length === 0) {
        this.$message({
          message: '请选择要导出的数据',
          type: 'error',
        })
      } else {
        const checkResultStr = this.importList.join(',')
        const req = `?idList=${checkResultStr}`
        const link = document.createElement('a')
        link.href = importBonusData(req)
        link.target = 'targetName'
        link.click()
      }
    },

    tabChoose(type) {
      this.importList = []
      this.selectData.status = type
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.getTableList('1')
    },
    getListAllOrg() {
      getListAllOrg({}).then(res => {
        if (res.status === 200) {
          this.columnsOffices = res.data
        }
      })
    },
    changeDepart() {
      this.importList = []
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.getTableList('1')
    },
  },
}
</script>

<style lang="scss" scoped>
.bonus_two {
  height: 100%;
  .title_box {
    height: 56px;
    background-color: #ffffff;
    /deep/.el-tabs__header {
      margin: 0;
      padding: 0 10px;

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 52px;
      }
    }
    /deep/.el-tabs__nav {
      display: flex;
      .el-tabs__active-bar {
        background-color: #022a6d;
      }
      .el-tabs__item.is-active {
        color: #022a6d;
      }
      .el-tabs__item {
        height: 52px;
        line-height: 52px;
        padding: 0 10px;
        &:hover {
          color: #022a6d;
        }
      }
    }
  }
  .bonus_one_select {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 5px;
    .el-select {
      margin-left: 10px;
    }
  }
  .bonus_left_total {
    display: flex;
    height: 40px;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    font-size: 16px;
    .active_select {
      color: #2b78f1;
      font-weight: bold;
    }
    .p_r_l {
      margin: 0 4px;
    }
    .left_total_color {
      color: #2b78f1;
    }
  }
  .bonus_one_main {
    display: flex;
    height: calc(100% - 60px);
    .bonus_left {
      height: 100%;
      width: 280px;
      border-right: 1px solid #e5e5e5;
      // box-shadow: 0 10px 10px 0 rgba(2, 2, 2, 0.22);
      padding-bottom: 20px;
      padding-top: 5px;
      display: flex;
      flex-direction: column;
      .bonus_left_scroll {
        flex: 1;
      }
      .bonus_left_list {
        padding: 0 10px;
        height: calc(100% - 20px);
        overflow-y: auto;
      }
      .page_r {
        text-align: right;
        margin-top: 10px;
      }
      .infor_left_one {
        padding: 8px;
        border-bottom: 1px solid #e5e5e5;
        cursor: pointer;
      }
      .bonus_two_check {
        display: flex;
      }
      .bonus_left_title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 6px;
        margin-left: 10px;
      }
      .left_title_box {
        position: relative;
        span {
          position: absolute;
          right: -10px;
          top: 0;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: #e45858;
        }
      }
      .is_select {
        background-color: #5a96e9;
        color: #ffffff;
        .bonus_left_message {
          color: #ffffff;
        }
      }
      .bonus_left_status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        .left_status_bo {
          background-color: #f59a23;
          background-color: #fdeed7;
          border-radius: 4px;
          // padding: 4px 6px;
          font-size: 14px;
          color: #86642c;
          padding: 2px 3px;
        }
        .left_status_bb {
          color: #a26413;
        }
      }
      .bonus_left_message {
        display: flex;
        justify-content: space-between;
        color: #a7a7a7;
        align-items: center;
      }
    }
    .bonus_right {
      width: calc(100% - 280px);
      height: 100%;
    }
    .no-data {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      font-size: 18px;
      color: #ccc;
    }
  }
}
</style>
